<template>
  <div class="todo-page">
    <h1>📝 我的待办事项</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input :checked="todo.done" type="checkbox"/>
        <span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">
          {{ todo.title }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {ref} from 'vue'

const todos = ref([
  {id: 1, title: '学习 Vue', done: true},
  {id: 2, title: '调用 Spring Boot 接口', done: false},
])
</script>

<style scoped>
.todo-page {
  padding: 2rem;
  font-family: sans-serif;
}
</style>
